<script setup>
    let msg = "hello vue3";
    let getMsg = () => {
        return "hello vue3 message";
    };
    let age = 15;
    let bee = "蜂 蜜";
    let redMsg = "<font color='red'>红色的字</font>"
    let greenMsg = `<font color='green'>${msg}</font>`

    // 购物车
    let carts = [
        { name: "可乐", price: 3, number: 10 },
        { name: "薯片", price: 5, number: 4 },
    ];
    // 计算购物车的总金额
    function compute() {
        let count = 0;
        for (let index in carts) {
            count += carts[index].price * carts[index].number;
        }
        return count;
    }
</script>

<template>
    <div>
        <!-- 文本渲染 -->
        <span v-text="msg"></span><br>
        <span v-text="age>18 ? '成年' : '未成年'"></span><br>
        <span v-text="bee.split(' ').reverse().join('')"></span><br>
        <span v-html="redMsg"></span><br>
        <span v-html="greenMsg"></span><br>
        <span v-text="redMsg"></span><br>
        <span v-text="greenMsg"></span><br>

        <!-- 属性渲染 v-bind:属性名='属性值'，可以简写为“:属性名='属性值'” -->
        <a v-text="'点击跳转百度'" v-bind:href="'http://www.baidu.com'" :target="'blank'"></a>
    </div>

</template>

<style scoped></style>
